<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>仪表板 - 河域分割系统</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}">
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <div class="container">
            <a class="navbar-brand" href="{{ url_for('index') }}">河域分割系统</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav me-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="{{ url_for('index') }}">首页</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link active" href="{{ url_for('dashboard') }}">仪表板</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="{{ url_for('data.my_data') }}">我的数据</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="{{ url_for('data.upload') }}">上传数据</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="{{ url_for('analysis.time_series_analysis') }}">时间分析</a>
                    </li>
                </ul>
                <ul class="navbar-nav">
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="userDropdown" role="button" data-bs-toggle="dropdown">
                            <i class="bi bi-person-circle"></i> {{ current_user.username }}
                        </a>
                        <ul class="dropdown-menu dropdown-menu-end">
                            <li><a class="dropdown-item" href="#">个人资料</a></li>
                            <li><a class="dropdown-item" href="#">设置</a></li>
                            <li><hr class="dropdown-divider"></li>
                            <li><a class="dropdown-item" href="{{ url_for('auth.logout') }}">退出登录</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <!-- 主内容 -->
    <div class="container my-4">
        <!-- 欢迎消息 -->
        <div class="row mb-4">
            <div class="col-12">
                <div class="card">
                    <div class="card-body">
                        <h4 class="card-title">欢迎, {{ current_user.username }}!</h4>
                        <p class="card-text">欢迎使用河域分割系统，您可以在这里管理您的数据和分析结果。</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- 统计面板 -->
        <div class="row mb-4">
            <div class="col-md-4 mb-3">
                <div class="card h-100">
                    <div class="card-body dashboard-stat">
                        <i class="bi bi-images mb-3" style="font-size: 2rem; color: #0d6efd;"></i>
                        <h5 class="card-title">上传的图像</h5>
                        <div class="stat-value">{{ stats.image_count }}</div>
                    </div>
                </div>
            </div>
            <div class="col-md-4 mb-3">
                <div class="card h-100">
                    <div class="card-body dashboard-stat">
                        <i class="bi bi-bar-chart mb-3" style="font-size: 2rem; color: #0d6efd;"></i>
                        <h5 class="card-title">完成的分析</h5>
                        <div class="stat-value">{{ stats.prediction_count }}</div>
                    </div>
                </div>
            </div>
            <div class="col-md-4 mb-3">
                <div class="card h-100">
                    <div class="card-body dashboard-stat">
                        <i class="bi bi-water mb-3" style="font-size: 2rem; color: #0d6efd;"></i>
                        <h5 class="card-title">最大水域占比</h5>
                        <div class="stat-value">{{ stats.max_water_percentage }}%</div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 快速操作 -->
        <div class="row mb-4">
            <div class="col-12">
                <h4 class="mb-3">快速操作</h4>
            </div>
            <div class="col-md-6 mb-3">
                <div class="card h-100 dashboard-card">
                    <div class="card-body dashboard-card-body">
                        <h5 class="card-title">上传新数据</h5>
                        <p class="card-text">上传新的卫星影像或SHP文件进行分析</p>
                    </div>
                    <div class="card-footer bg-transparent border-0">
                        <a href="{{ url_for('data.upload') }}" class="btn btn-primary w-100">
                            <i class="bi bi-cloud-upload"></i> 上传数据
                        </a>
                    </div>
                </div>
            </div>
            <div class="col-md-6 mb-3">
                <div class="card h-100 dashboard-card">
                    <div class="card-body dashboard-card-body">
                        <h5 class="card-title">查看分析结果</h5>
                        <p class="card-text">浏览您已完成的所有分析结果和预测</p>
                    </div>
                    <div class="card-footer bg-transparent border-0">
                        <a href="{{ url_for('data.my_data') }}" class="btn btn-primary w-100">
                            <i class="bi bi-graph-up"></i> 查看结果
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <!-- 最近活动 -->
        <div class="row">
            <div class="col-12">
                <h4 class="mb-3">最近活动</h4>
                <div class="card">
                    <div class="card-body p-0">
                        <div class="table-responsive">
                            <table class="table table-hover mb-0">
                                <thead>
                                    <tr>
                                        <th>时间</th>
                                        <th>活动类型</th>
                                        <th>模型</th>
                                        <th>图像</th>
                                        <th>操作</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% if recent_activities %}
                                    {% for activity in recent_activities %}
                                    <tr>
                                        <td>{{ activity.date }}</td>
                                        <td>{{ activity.type }}</td>
                                        <td>{{ activity.model }}</td>
                                        <td>{{ activity.image_name }}</td>
                                        <td>
                                            <a href="{{ url_for('prediction.view_result', prediction_id=activity.prediction_id) }}" class="btn btn-sm btn-primary">
                                                <i class="bi bi-eye"></i> 查看
                                            </a>
                                        </td>
                                    </tr>
                                    {% endfor %}
                                    {% else %}
                                    <tr>
                                        <td colspan="5" class="text-center py-3">暂无活动记录</td>
                                    </tr>
                                    {% endif %}
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 页脚 -->
    <footer class="bg-dark text-white py-4 mt-5">
        <div class="container">
            <div class="row">
                <div class="col-md-6">
                    <h5>河域分割系统</h5>
                    <p>基于深度学习的河域分割与分析平台</p>
                </div>
                <div class="col-md-3">
                    <h5>链接</h5>
                    <ul class="list-unstyled">
                        <li><a href="{{ url_for('index') }}" class="text-white">首页</a></li>
                        <li><a href="{{ url_for('dashboard') }}" class="text-white">仪表板</a></li>
                        <li><a href="{{ url_for('data.my_data') }}" class="text-white">我的数据</a></li>
                    </ul>
                </div>
                <div class="col-md-3">
                    <h5>账户</h5>
                    <ul class="list-unstyled">
                        <li><a href="#" class="text-white">个人资料</a></li>
                        <li><a href="#" class="text-white">设置</a></li>
                        <li><a href="{{ url_for('auth.logout') }}" class="text-white">退出登录</a></li>
                    </ul>
                </div>
            </div>
            <hr>
            <div class="text-center">
                <p>&copy; 2023 河域分割系统. 保留所有权利.</p>
            </div>
        </div>
    </footer>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html> 